<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/' }">
        <i class="el-icon-s-promotion"></i> 后台管理
      </el-breadcrumb-item>
      <el-breadcrumb-item>订单详情</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <el-card>    <el-descriptions title="订单详情" direction="vertical" :column="4" border>

      <el-descriptions-item label="订单号">{{orderTable.sn}}</el-descriptions-item>
      <el-descriptions-item label="收货地址">{{orderTable.detailedAddress}} </el-descriptions-item>
      <!--      {{orderTable.state}}-->
      <el-descriptions-item label="订单状态" :span="2">
        <el-tag :type="getStateText(orderTable.state)"><span>{{ state }}</span></el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="备注">
        <el-tag size="small">{{orderTable.tag}}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="下单时间">{{orderTable.gmtOrder}}</el-descriptions-item>
    </el-descriptions></el-card>

    <el-divider></el-divider>
    <template>
      <el-card>
        <el-table
            :data="detailsTable"
            stripe
            border="true"
            empty-text="暂无数据"
            style="width: 100%">
          <el-table-column
              align="center"
              prop="mainPicture"
              label="商品"
          >
            <template v-slot="{ row }">
              <img :src="row.mainPicture" alt="Image" width="100px" height="100px" style="float: left"/>
              <span style="width: 100px;height: 100px;margin-left: 50px"  >{{row.title}}</span>
            </template>
          </el-table-column>
          <el-table-column
              align="center"
              prop="price"
              label="price"
              width="350">
          </el-table-column>
          <el-table-column
              align="center"
              prop="quantity"
              label="数量"
              width="350">
          </el-table-column>
          <el-table-column
              align="center"
              label="小计"
              width="350"
          >    <template slot-scope="scope">
            <span>{{ scope.row.quantity * scope.row.price }}</span>
          </template>
          </el-table-column>
        </el-table>
      </el-card>

    </template>
    <el-divider></el-divider>
    <ul class="u1">
      <li style="list-style: none">
        <span class="label">
          应付金额:
        </span>
        <span class="txt flowPrice" >
          ￥{{amountOfActualPay}}
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sn: "",
      mainPicture: [],
      orderId: "",
      price: "",
      state: "",
      amountOfActualPay: "",
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      pay: "1888",
      tag: "暂无",
      orderTable: [],
      detailsTable: []
    }
  },
  created() {
    this.fetchImage();
  },
  methods: {
    fetchImage() {
      // 发出 HTTP GET 请求以获取图片数据
      axios.get('/api/getImage', { responseType: 'arraybuffer' })
          .then(response => {
            // 将响应中的图像数据分配给 imageUrl 变量
            let base64 = btoa(
                new Uint8Array(response.data)
                    .reduce((data, byte) => data + String.fromCharCode(byte), '')
            );
            this.imageUrl = 'data:image/jpeg;base64,' + base64;
          })
          .catch(error => {
            console.log(error);
          });
    },
    getStateText(state) {
      //状态吗对应状态转换
      // 0=未支付，1=已关闭（超时未支付），2=已取消，3=已支付，4=已签收，5=已拒收，6=退款处理中，7=已退款
      switch (state) {
        case 0:
          this.state = '未付款'
          return 'warning';
        case 1:
          this.state = '已关闭（超时未支付）'
          return 'danger';
        case 2:
          this.state = '已取消'
          return 'warning';
        case 3:
          this.state = '已支付'
          return 'success';
        case 4:
          this.state = '已签收'
          return 'success';
        case 5:
          this.state = '已拒收'
          return 'danger';
        case 6:
          this.state = '退款处理中'
          return 'danger';
        case 7:
          this.state = '已退款'
          return 'success';
        default:
          this.state = 'danger'
          return '未知状态';
      }

    },
    loadOrder() {
      let url = 'http://localhost:10005/oms/order/'+this.sn+'/order_one';
      console.log('url = ' + url);
      // 从localStorage中取出此前存入的jwt
      // let localJwt = localStorage.getItem('jwt');
      // console.log('localJwt = ' + localJwt);
      this.axios
          //  .create({'headers': {'Authorization': localJwt}})
          .get(url).then((response) => {
        this.orderTable = response.data.data;
        this.orderId = response.data.data.id
        if (this.orderTable.tag == null){
          this.orderTable.tag = this.tag
        }
        this.amountOfActualPay = this.orderTable.amountOfActualPay
      });
    },
    loadProduct() {
      let url = 'http://localhost:10005/oms/order/'+this.orderId+'/details';
      console.log('url = ' + url);
      // 从localStorage中取出此前存入的jwt
      // let localJwt = localStorage.getItem('jwt');
      // console.log('localJwt = ' + localJwt);
      this.axios
          //  .create({'headers': {'Authorization': localJwt}})
          .get(url).then((response) => {
        this.detailsTable = response.data.data.list
        console.log(this.detailsTable)


      });
    }
  },
  mounted() {
    this.sn = this.$route.query.sn;
    this.orderId = this.$route.query.orderId;
    this.loadOrder()
    this.loadProduct()
  }
}
</script>

<style scoped>
.u1{
  position: absolute;
  right: 40px;
}
.label {
  float: left;
  width: 500px;
  font-size: 16px;
  text-align: right;
}
.txt {
  float: left;
  width: 100px;
  font-size: 20px;
  text-align: right;
  color: red;
}


</style>